<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="icons/iconfont.css"/>
		<style type="text/css">
			*{margin:0;padding:0;font-family: "微软雅黑";}
			ul,li{list-style: none;}
			a{text-decoration: none;}
			html,body{height:100%;}
			body{background: #faf7f7;}
			#out{height:100%;display: -webkit-box;-webkit-box-orient: vertical;}
			header{position:relative;height:80px;line-height: 80px;background:#ab1b1a;color:#fff;text-align: center;}
			header h1{font-size: 36px;font-weight: normal;}
			header a{position: absolute;right:20px;top:15px;display: block;width:105px;height:50px;line-height: 50px;border-radius:12px;box-shadow: 0 0 10px #333;color:#fff;}
			article{-webkit-box-flex: 1;overflow: hidden;}
			.content{padding:100px 40px 50px 40px;}
			.content-T{height:auto;overflow: hidden;}
			.content-T img{float:left;}
			.content-T p{float:left;margin-left:32px;margin-top:15px;font-size: 34px;line-height: 60px;}
			.content-T p i{font-style: normal;color:#FF0E54;}
			.content-M{border: 1px solid #ccc;border-radius: 20px;margin-top:80px;}
			.content-M li{height:auto;overflow: hidden;font-size: 34px;line-height: 89px;padding:0 25px 0 30px;border-bottom: 1px solid #ccc;}
			.content-M li:last-child{border: 0;}
			.content-M li span{float:left;}
			.content-M li b{float:right;font-weight: normal;}
			footer{height:80px;background:#484850;display: -webkit-box;}
			footer span{-webkit-box-flex: 1;display: block;text-align: center;color:#fff;padding-top:14px;}
			footer a{color:#fff;}
			footer span b{display: block;line-height: 36px;font-size: 22px;font-weight: normal;}
			footer .redBg{background:#bf1b19;color:#fff;}
			.cover{width:100%;height:100%;position:absolute;top:0;left:0;background:#000;filter:alpha(opacity=30);opacity:.3;display: none;}
			.camera{width:370px;height:300px;position: absolute;top:150px;left:85px;padding:20px 50px 50px 50px;text-align: center;background: #e8e8e8;border-radius: 25px;display: none;}
			.camera dl{height:auto;overflow: hidden;}
			.camera dt{width:370px;float:left;border-bottom: 2px solid #CCCCCC;font-size: 28px;line-height: 64px;}
			.camera dd{float:left;width:185px;font-size: 22px;}
			.camera dd a{padding:40px 0;display: block;}
		</style>
	</head>
	<body>
		<section id="out">
			<header>
				<h1>我的秀</h1>
				<a href="javascript:;">充值</a>
			</header>			
			<article class="wrapper">
				<section class="content">
					<section class="content-T">
						<img src="img/myshow1.jpg" />
						<p>昵称：<span>未知</span><br/>余额：<i>0</i></p>
					</section>
					<ul class="content-M">
						<li><span>我的订单</span><b>&gt;</b></li>
						<li><span>我的优惠券</span><b>&gt;</b></li>
						<li><span>浏览记录</span><b>&gt;</b></li>
						<li><span>我的收藏</span><b>&gt;</b></li>
					</ul>
				</section>				
			</article>
			<footer>
				<span><a href="index1.html"><i class="iconfont">&#xe644;</i><b>首页</b></a></span>
				<span><a href="good.html"><i class="iconfont">&#xe692;</i><b>分类</b></a></span>
				<span><a href="shopcar.html"><i class="iconfont">&#xe61b;</i><b>购物车</b></a></span>
				<span class="redBg"><a href="myshow.html"><i class="iconfont">&#xe646;</i><b>我的秀</b></a></span>
				<span><i class="iconfont">&#xe660;</i><b>设置</b></span>					
			</footer>
			<section class="cover"></section>
			<section class="camera">
				<dl>
					<dt>选择操作</dt>
					<dd>
						<a href="#"><img src="img/myshow2.jpg" /></a>
						<span>相机</span>
					</dd>
					<dd>
						<a href="#"><img src="img/myshow3.jpg" /></a> 
						<span>相册</span>
					</dd>
				</dl>
			</section>
		</section>
	</body>
	<script src="js/jquery183.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/iscroll.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			bodyScale();
			setTimeout(function(){
				var myScroll=new IScroll(".wrapper",{	//中间区域iscroll实例化
					    mouseWheel: true,
					    scrollbars: true
				});
			},300)
			$('.content-T img').on('tap',function(){	//点击头像
				$('.cover').show();
				$('.camera').show();
			})
			$('.cover').on('tap',function(){	//点击遮罩层事件
				$('.cover').hide();
				$('.camera').hide();
			})
			
			function bodyScale(n){	//屏幕宽度自适应
				var devicewidth=document.documentElement.clientWidth;
				var scale=devicewidth/n;
				document.body.style.zoom=scale;
			}
			window.onload=window.onresize=function(){				
					bodyScale(640);
			}
		})
	</script>
</html>
